<template>
  <view>

   <!-- #ifdef APP-PLUS-->
   <u-sticky offset-top="0" zIndex="10000">
   <!-- #endif -->
     <!-- #ifdef H5 -->
     <u-sticky offset-top="-44" zIndex="10000">
     <!-- #endif -->
      <up-navbar title="发布科普" @rightClick="rightClick"  :placeholder="true" :titleStyle="{
                     'fontSize':'36rpx',
                     'fontWeight':'600',
                     'color':'#000'
                   }">
        <template #left>
          <view class="topLeft" @click="goBack()">退出预览</view>
        </template>
        <template #right>
          <view class="topRight" @click="submit()">发布</view>
        </template>
      </up-navbar>
      <view class=" u-p-l-25 u-p-r-25">
        <view class="comment_top u-border-bottom">
          <view class="userInfo ">
            <u--image :src="detail?.avatar" width="70rpx" height="70rpx" radius="50%">
              <template #error class="flex-center-center">
                <view class="ic-error">
                  <u-icon name="photo" size="20"></u-icon>
                </view>
              </template>
            </u--image>
            <view class="nickname">
              <view>
                {{ detail?.nickname }}
              </view>
              <view class="user_tags create_time">
                {{detail.create_time}}
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-sticky>
    <scroll-view scroll-y="true">
      <!-- <view style="border-bottom: 1rpx solid #f6f6f6"></view> -->

      <view class="pages" id="comm_box">
        <view class="item_list">
          <!-- <view class="item_list_t" v-show="commScroll"></view> -->
          <view class="item_list_c">
            <view class="kepu_title">
              {{ detail?.title }}
            </view>
            <!--  <view v-if="detail?.type==1">
                <image :src="detail?.content"
                       mode="widthFix"
                       style='width:100%'
                       @load="imageLoad"></image>
              </view> -->
            <view>
              <u-parse :previewImg="false" :content="detail?.content" :showImgMenu="false" :selectable="false"
                :lazyLoad="true"></u-parse>
            </view>

          </view>

          <!--<view class="scroll-content" v-if="detail?.post_type==1">
       					<video id="myVideo" v-for="(image, i) in detail?.image" :src="image" :key="i" @error="videoErrorCallback" controls></video>
       				</view>-->
          <view class="time">{{ detail?.create }} <text class="address"
              v-if="detail?.province">{{detail?.province||''}}</text></view>
        </view>
      </view>
    </scroll-view>
  </view>


</template>

<script setup>
  const laheiShow = ref(false)
  const closeLafei = () => {
    laheiShow.value = false
  }
  const lahei = () => {
    fenShow.value = false
    laheiShow.value = true
  }
  import {
    ref,
    reactive,
    nextTick
  } from 'vue'
  import {
    onLoad,
    onReady,
    onShow,
    onUnload
  } from '@dcloudio/uni-app'

  import {
    navigateTo,
    showToast,
    redirectTo
  } from '@/utils'
  import {
    coupePostApi,
    kepuCateApi,
    CoupeDraftsApi,
    CoupeDraftsEditApi,
    coupeDetailsApi,
    CoupeDraftsAddApi
  } from '@/api/social'
  const detail = ref({})
  onUnload(() => {
    uni.removeStorage({
      key: 'kepuContent',
      success: function(res) {
        console.log('删除成功')
      }
    })
  })

  function toBack() {
    uni.navigateBack({
      delta: 1,
    })
  }
  onLoad(() => {

    let kepuContent = uni.getStorageSync('kepuContent');
    if (kepuContent) {
      detail.value = JSON.parse(kepuContent)
    }
  })
  const submit = () => {
    if (!detail.value.category) {
      uni.showToast({
        title: '请选择标签！',
        icon: 'none'
      });
      return false
    }
    if(!detail.value.title){
      uni.showToast({
        title: '请输入标题！',
        icon: 'none'
      });
      return false
    }
    if(detail.value.title.length<5){
      uni.showToast({
        title: '标题最少五个字！',
        icon: 'none'
      });
      return false
    }
    // const pages=getCurrentPages()
    // console.log(pages)
    coupePostApi(detail.value).then(res=>{
    if(res.code==200){
        redirectTo('/socials/content/content')
      }
      console.log()
      showToast(res.message)
    })
  }

  const goBack=()=>{
    uni.setStorage({
      key:'kepuContentPP',
      data:detail.value
    })
    redirectTo('/socials/article/article')
  }
</script>
<style>
  page {
    background: #fff;
  }
</style>
<style lang="scss" scoped>
  .topLeft {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 30rpx;
    color: #5C5C5C;
  }

  .topRight {
    width: 110rpx;
    line-height: 56rpx;
    background: #00C1B9;
    border-radius: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-size: 30rpx;
    color: #FFFFFF;
    text-align: center;
  }

  .comment_top {
    display: flex;
    padding: 20rpx 0 24rpx;
    background: #fff;
    align-items: center;

    .left {
      padding: 0 14rpx;
      font-weight: 700;
    }

    .userInfo {
      display: flex;
      align-items: center;
      flex: 1;

      .nickname {
        font-family: PingFang SC, PingFang SC;
        padding-left: 10rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #000000;
      }
    }

    .flw_btn {
      background: #00C1B9;
      border-radius: 60rpx 60rpx 60rpx 60rpx;
      font-size: 26rpx;
      color: #fff;
      line-height: 56rpx;
      margin-right: 30rpx;
      width: 110rpx;
      text-align: center;
    }

    .w_flw_btn {
      background: #ffffff;
      border-radius: 60rpx 60rpx 60rpx 60rpx;
      border: 1rpx solid #00C1B9;
      line-height: 43rpx;
      margin-right: 30rpx;
      font-size: 26rpx;
      color: #00C1B9;
      width: 125rpx;
      text-align: center;
    }
  }

  .con_list_btn_l_text {
    font-size: 28rpx;
    color: #333;
  }

  .uni-navbar__header-container {
    overflow: auto;
  }

  .header {
    overflow: hidden;
    padding: 10rpx 0;
    background: #fff;
    z-index: 1000000;
  }

  .head_img {
    width: 40rpx;
    height: 40rpx;
    float: left;
    margin: 16rpx 25rpx;
  }

  .head_cen {
    float: left;

    .head_cen_img {
      width: 72rpx;
      height: 72rpx;
      border-radius: 50%;
      float: left;
    }

    .head_cen_name {
      float: left;
      line-height: 72rpx;
      margin: 0 10rpx;
    }
  }

  .head_cen_guan {
    float: left;
    height: 40rpx;
    border: 1rpx solid #0074fc;
    line-height: 38rpx;
    border-radius: 20rpx;
    text-align: center;
    margin: 15rpx 0;
    padding: 0 15rpx;
    font-size: 26rpx;
  }

  .head_title {
    text-align: center;
    line-height: 72rpx;
    float: left;
    width: 550rpx;
  }

  .pages {
    padding: 0 30rpx 15rpx;
    box-sizing: border-box;

    .item_list {
      width: 690rpx;
      background: #ffffff;
      box-sizing: border-box;
      padding-bottom: 20rpx;
      // border-bottom: 2rpx solid #e6e6e6;

      .time {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #9d9d9d;
        letter-spacing: 2px;
        padding-top: 15rpx;
      }

      .item_list_t {
        overflow: hidden;
        height: 112rpx;
        padding: 20rpx 0;

        .item_list_t_img {
          float: left;
          width: 72rpx;
          height: 72rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }

        .item_list_t_title {
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #999999;
          line-height: 72rpx;
          margin: 0 20rpx;
          float: left;
        }
      }

      .item_list_c {
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 1.5;
        padding-top: 25rpx;
      }

      .item_list_i {
        padding-top: 20rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .item_list_t_img {
          width: 207rpx;
          height: 186rpx;
          border-radius: 6rpx;
        }
      }
    }
  }

  .head_icon_img {
    width: 50rpx;
    height: 10rpx;
    margin: 30rpx;
    float: right;
  }

  .image-list {
    width: 100%;
    margin: 22rpx 0;

    .scroll-content {
      .ic-error {
        width: 100%;
        padding-left: 77rpx;
        font-size: 28rpx;
        display: flex;
      }
    }

    ::v-deep .u-transition {
      margin-right: 20rpx;
    }
  }

  .scroll-content {
    overflow: hidden;
    padding-top: 0;
  }

  .scroll-content_img {
    width: 216rpx;
    height: 198rpx;
    margin-right: 20rpx;
    margin-top: 20rpx;
    float: left;
  }

  .scroll-content_img:nth-of-type(3n) {
    margin-right: 0;
  }

  .scroll-content_img1:nth-of-type(2n) {
    margin-right: 100px;
  }

  .scroll-content_img1:nth-of-type(3n) {
    margin-right: 20rpx;
  }

  .comm_box {
    // min-height: 100vh;

    .all {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #202020;
      padding-top: 35rpx;
    }
  }

  .comment {
    width: 100%;
    padding-top: 24rpx;
    box-sizing: border-box;

    .comment_box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .comment_head {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .comment_head_l {
          width: 62rpx;
          height: 62rpx;
          border-radius: 50%;
        }

        .comment_head_r {
          width: 610rpx;

          &.commentBorder {
            border-bottom: 1rpx solid #e6e6e6;
            // &:nth-last-child(1){
            //   border:none
            // }
          }

          .comment_nickname {
            display: flex;
            align-items: center;
          }

          .comment_head_r_name {
            font-size: 28rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            flex: 1;
            align-items: center;
          }

          .comment_ct_r_text {
            font-size: 28rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 40rpx;
            margin-top: 10rpx;
            width: 504rpx;
          }

          .comment_ct_r_time {
            font-size: 22rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #999;
            line-height: 33rpx;
            padding-top: 5rpx;

            text {
              color: #333333;
              margin-left: 10rpx;
              font-size: 26rpx;
            }

            .address {
              color: #999;
              margin-right: 15rpx;
              font-size: 22rpx;
            }
          }
        }
      }
    }

    .comment_boxc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 15rpx 0 0 0;
      width: 100%;

      .comment_head {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 610rpx;

        .comment_head_l {
          width: 62rpx;
          height: 62rpx;
          border-radius: 50%;
        }

        .comment_head_r {
          width: 530rpx;

          .comment_head_r_name {
            font-size: 24rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            // display: flex;
          }

          .comment_ct_r_text {
            font-size: 26rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 1.5;
          }

          .comment_ct_r_time {
            font-size: 22rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #999;
            line-height: 33rpx;

            text {
              color: #333333;
              margin-left: 10rpx;
            }
          }
        }
      }
    }

    .comment_box_zan {
      text-align: right;

      .comment_box_zan_img {
        width: 40rpx;
        height: 40rpx;
      }

      .comment_box_zan_num {
        font-weight: 500;
        font-size: 22rpx;
        color: #333333;
        text-align: center;
      }

      .icons {
        width: 28rpx;
        height: 28rpx;
        display: block;
      }
    }

    &:nth-last-child(2) {
      .comment_box .comment_head .comment_head_r.commentBorder {
        border: none;
      }
    }
  }

  .comment_boxc_more {
    font-weight: 400;
    font-size: 26rpx;
    color: #AAAAAA;
    text-align: center;
    padding-top: 20rpx;

    .empty_image {
      width: 240rpx;
      height: 220rpx;
      margin-top: 100rpx;
    }
  }

  .comment_boxc_more1 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #00C1B9;
    text-align: left;
    padding-left: 82rpx;
  }

  .all {
    font-size: 26rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 36rpx;
    padding: 20rpx 0;
  }

  .footerkong {
    padding: 26rpx 30rpx;
    height: 58rpx;
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
    box-sizing: content-box;
  }

  .footer {
    width: 100%;
    box-sizing: border-box;
    padding: 26rpx 30rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    box-shadow: 0rpx -2rpx 7rpx 0rpx rgba(0, 0, 0, 0.09);
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
    z-index: 999;

    .footer_input {
      width: 362rpx;
      height: 70rpx;
      line-height: 70rpx;
      background: #F5F6F8;
      border-radius: 70rpx;
      text-align: left;
      font-size: 26rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;
      padding-left: 10rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
    }

    .footer_btn {
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;

      image {
        width: 28rpx;
        height: 28rpx;
        display: block;
        margin-right: 10rpx;
      }

      text {
        font-size: 26rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 58rpx;
      }
    }
  }

  .footera {
    width: 100%;
    box-sizing: border-box;
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    background: #fff;
    box-shadow: 0rpx -2rpx 7rpx 0rpx rgba(0, 0, 0, 0.09);
    box-sizing: border-box;

    .footer_input {
      width: 558rpx;
      height: 154rpx;
      border-radius: 18rpx;
      border: 1rpx solid #e6e6e6;
      font-size: 26rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      box-sizing: border-box;
      padding: 20rpx;
      background: #F5F6F8;
      border: none;
    }

    .send-btn {
      width: 111rpx;
      height: 50rpx;
      background: #00C1B9;
      border-radius: 36rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 50rpx;
      text-align: center;
      margin: 0;
    }
  }

  .fen_box_title {
    text-align: center;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 90rpx;
    height: 90rpx;
  }

  .fen_box {
    width: 100%;
    border-radius: 10rpx 10rpx 0 0;
    padding: 0 24rpx 24rpx;

    .fen_box_cen {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      padding-top: 20rpx;

      .fen_box_cen_l {
        text-align: center;
        width: 150rpx;
        margin: 0;
        line-height: 1;
        background-color: transparent !important;

        &::after {
          background: transparent !important;
        }

        .fen_box_cen_l_img {
          width: 100rpx !important;
          height: 100rpx !important;
          border-radius: 50%;
        }

        .fen_box_cen_l_te {
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 80rpx;
        }
      }

      .lh_box_cen_l {
        width: 216rpx;
        padding: 10rpx 0 15rpx;
        background: #ffffff;
        border-radius: 14rpx 14rpx 14rpx 14rpx;
        text-align: center;
        margin: 10rpx 20rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #333333;

        image {
          width: 75rpx;
          height: 75rpx;
          display: block;
          margin: 0 auto;
        }
      }
    }
  }

  .all_com_btn {
    width: 298rpx;
    height: 60rpx;
    border-radius: 42rpx 42rpx 42rpx 42rpx;
    border: 2rpx solid #00C1B9;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #00C1B9;
    line-height: 60rpx;
    text-align: center;
    margin: 30rpx auto;
  }

  .kepu_title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 30rpx;
    color: #333333;
    line-height: 35rpx;
    text-align: left;
    margin-bottom: 20rpx;
  }

  .jxcontent {
    padding: 30rpx 48rpx 0;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #000000;
    text-align: left;
    margin-bottom: 20rpx;
  }

  .user_tags {
    display: flex;
    align-items: center;

    text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 22rpx;
      color: #969696;
      margin-right: 10rpx;
    }

    image {
      width: 113rpx;
      height: 27rpx;
      display: block;
      margin-right: 10rpx;
    }
  }

  .create_time {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #AAAAAA;
  }
</style>
